Задача:
В центре экрана вывести с каким-нибудь эффектом модальное окно с текстом и формой.
Перед началом работы не забудьте подключить jQuery и плагин jquery.cookie.js
Делаем popup-блок на сайт
Шаг 1. Разметка (HTML)
#popuper - само окно, содержащее форму и прочий контент. Для инпутов формы мы добавили атрибут placeholder, и класс placeholder с помощью которого через jquery будем эмулировать этот атрибут для IE7-9. Поэтому сразу подключим для IE этот скрипт между тегами head:
#popuperOverlayer - слой, который будет накладываться на сайт, он будет иметь полупрозрачность и поверх него уже будет отображаться блок #popuper
Шаг 2. CSS
Создайте popuper.css, подключите его в хедах, весь стиль для нашего окошка будет в этом файле.
Начнем с самого простого. Определим стили перекрывающего слоя #popuperOverlayer:
#popuperOverlayer
{
position: fixed; top:0;
width: 100%;
height: 100%;
background: #000;
opacity:0.7;
/*display: none;*/
z-index: 8;
}
Мы задали 100% высоты и ширины слою, черную заливу и полупрозрачность 0.7. Посмотрим, что получилось (свой-во display: none; закомментировано спецально, чтобы на этапе создания стилей мы видели результат работы, как только со стилями будет закончено, это св-во нужно будет расскоменнтировать). Итак, проверям, везде все красиво, кроме браузеров IE7-8, т.к. свойство opacity он не понимает. Для этих браузеров мы создадим отдельный css popuper-ie.css, подключим в хедах:
А в нем напишем:
#popuperOverlayer
{
background: url(images/ovaerlayer.png);
}
Здесь мы просто переопределяем св-во background и задаем ему заливку картинкой. Эта картинка имеет размеры 1px*1px, цвет #000000 и непрозрачность 70% :
Теперь зададим стиль самого окна:
#popuper
{
font-family: Arial;
position: absolute; z-index: 9;
height: 220px;
padding: 15px;
width: 600px;
top:50%; left:50%;
margin: -125px 0 0 -300px; /* Выравниваем окно по центру*/
background: #fefcea url(images/popuper_bg.png) repeat-x; /* Old browsers */
background: -moz-linear-gradient(top, #fefcea 0%, #f1da36 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefcea), color-stop(100%,#f1da36)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fefcea 0%,#f1da36 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fefcea 0%,#f1da36 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #fefcea 0%,#f1da36 100%); /* IE10+ */
background: linear-gradient(top, #fefcea 0%,#f1da36 100%); /* W3C */
/* Здесь использование filter для градиентной заливки в IE96-9 как в прошлом примере, сделает невозможным скруглить углы для IE9*/
border-radius:10px;
color: #333;
}
Здесь мы используем уже известный нам прием градиентной заливки, но в этот раз filter для IE7-9 использовать не будем, вместо этого мы для этих браузеров подложим картинку с нужным нам градиентом, для этого идем в фотошоп и создаем картинку шириной 1px и высотой равной высоте нашего окна (лучше даже пикселей на 20 побольше) и заливаем градиентом от #fefcea до #f1da36
Чтобы скруглить углы у окошка для IE7-8 подключим в хедах скрипт PIE.js и напишем след. код:
А самому окну добавим класс .rounded
Описываем стиль для кнопки "закрыть":
#popuper .close
{
position: absolute; top:-24px; right: -24px;
width: 24px; height: 24px;
display: block; cursor: pointer;
background: url(images/close.png) no-repeat;
}
Делаем ее за пределами окошка.
Стили для левой и правой части окошка:
#popuper .leftContent
{
width: 360px;
margin-right: 20px;
float: left;
}
#popuper .leftContent ul
{
margin: 0 0 0 10px;
list-style: none;
}
#popuper .leftContent ul li
{
background: url(images/accept1.png) no-repeat;
margin-bottom: 20px;
font-size: 20px;
padding: 0 0 2px 32px;
min-height: 20px;
font-style: italic;
}
#popuper .rightContent
{
width: 200px;
float: right;
margin-left: 20px;
}
#popuper h6
{
font-size: 18px;
text-transform: uppercase;
text-align: center;
margin: 20px 0;
}
#popuper .rightContent h6
{
text-align: left; color: #cc3300;
}
#popuper form input:-webkit-autofill{
color: #666 !important;
background: none !important;
}
#popuper form input
{
width: 180px;
height: 22px;
padding: 3px 5px;
display: block;
vertical-align: middle;
border: solid 1px #2794cd;
border-radius:3px;
margin-right: 5px;
margin-bottom: 20px;
}
#popuper button
{
height: 30px;
padding: 0 5px;
width: 190px;
cursor: pointer;
color: #fff; font-weight: 700;
vertical-align: middle;
border: solid 1px #4db8f0;
border-radius:3px;
background: #4db8f0; /* Old browsers */
background: -moz-linear-gradient(top, #4db8f0 0%, #0958a7 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4db8f0), color-stop(100%,#0958a7)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #4db8f0 0%,#0958a7 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #4db8f0 0%,#0958a7 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #4db8f0 0%,#0958a7 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4db8f0', endColorstr='#0958a7',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #4db8f0 0%,#0958a7 100%); /* W3C */
}
Тут особо ниего интересного нет, заострять внимание не будем. На этом этапе должно получиться примерно такое:
Было бы неплохо в инпутах вывести иконки. Для этого инпуты обернем тегами label, и в эти label добавим иконки:
И немного стилей для них:
#popuper form label
{
display: block; position: relative;
}
#popuper form .inputIcon
{
position: absolute;
right: 14px; top:7px
}
Мы просто сделали label блочным элементом и относительно них спозиционировали иконки.
Так стало симпатичнее:
Для IE7-8 добавим в popuper-ie.css дополнительный стиль для выравнивание текста в инпутах по высоте:
#popuper form input
{
padding-top: 6px; padding-bottom: 0;
}
Шаг 3. JS
Начинается самое интересное! Теперь мы можем спрятать наше окно. Раскомментируйте свойство /*display: none;*/ у #popuperOverlayer, а самому окну зададим позицию top:-220px, в итоге код будет такой:
#popuperOverlayer
{
position: fixed; top:0;
width: 100%;
height: 100%;
background: #000;
opacity:0.7;
display: none;
z-index: 8;
}
#popuper
{
font-family: Arial;
position: absolute; z-index: 9;
height: 220px;
padding: 15px;
width: 600px;
left:50%;
top:-220px;
margin: -125px 0 0 -300px; /* Варавниваем окно по центру*/
background: #fefcea url(images/popuper_bg.png) repeat-x; /* Old browsers */
background: -moz-linear-gradient(top, #fefcea 0%, #f1da36 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefcea), color-stop(100%,#f1da36)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fefcea 0%,#f1da36 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fefcea 0%,#f1da36 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #fefcea 0%,#f1da36 100%); /* IE10+ */
background: linear-gradient(top, #fefcea 0%,#f1da36 100%); /* W3C */
/* ТУТ ВНИМАНИЕ использование filter для градиентной заливки в IE96-9 как в прошлом примере, сделает невозможным скруглить углы для IE9*/
border-radius:10px;
color: #333;
}
Опишем функцию (предварительно создадим файл popuper.js в котором будем работать и подключим его в head), которая будет показывать наше окно:
$(function (){
if(!$.cookie('showPopuper'))
{
setTimeout(showPopuper, 3000);
}
/* Это потом удалить" */
else
{
setTimeout(showPopuper, 3000);
}
/* Конец Это потоп удалить */
function showPopuper()
{
$('#popuperOverlayer').fadeIn('fast', function(){ // Показываем оверлаейер, как закончится анимация запускаем показ самого окна
$('#popuper').animate({'top':'50%'}, 1000); // стандратная анимация
});
$.cookie('showPopuper', 1);
}
});
Тут все анологично, как и с панелькой, которую делали. Функция запускается по таймауту, сначала появляется popuperOverlayer - перекрывающий слой, затем сверху падает до середины экрана само окно. По окончанию всего действа устанавливем куку showPopuper, для того, чтобы пользователю второй раз окно не показывать. Все что между /* Это потом удалить" */ и /* Конец Это потоп удалить */ удалим позднее, когда полностью закончим.
Итак, все работает хорошо, но хочется лучше :) Предлагаю сделать наш блок прыгающим, для этого перейдем http://jqueryui.com/download и скачаем этот эффект:
Подключаем в хедах:
Немного изменим showPopuper(), после перемещения на заданную позицию блока popuper, зададим ему эффект bounce:
function showPopuper()
{
$('#popuperOverlayer').fadeIn('fast', function(){ // Показываем оверлаейер, как закончится анимация запускаем показ самого окна
$('#popuper').animate({'top':'50%'}, 1000, function(){
$('#popuper').effect('bounce', { times: 5, distance: 55 })
});
});
$.cookie('showPopuper', 1);
}
здесь times - кол-во "прыжков", distance - расстояние прыжков в px
Проверяем, все вроде хорошо. НО в ie7-8 все очень плохо. Это надо исправлять.
Расписывать все не буду, приведу лишь итоговые варианты того, что надо поменять.
Меняем html-код на этот:
CSS меняем на такой:
#popuper
{
position: fixed; z-index: 9;
width: 600px; height: 220px;
left:50%;
top:-100%;
margin: -125px 0 0 -300px; /* Варавниваем окно по центру*/
}
#popuperContent
{
font-family: Arial;
height: 220px;
padding: 15px;
width: 600px;
position: absolute; top:0; left:0;
background: #fefcea url(images/popuper_bg.png) repeat-x; /* Old browsers */
background: -moz-linear-gradient(top, #fefcea 0%, #f1da36 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefcea), color-stop(100%,#f1da36)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fefcea 0%,#f1da36 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fefcea 0%,#f1da36 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #fefcea 0%,#f1da36 100%); /* IE10+ */
background: linear-gradient(top, #fefcea 0%,#f1da36 100%); /* W3C */
/* ТУТ ВНИМАНИЕ использование filter для градиентной заливки в IE96-9 как в прошлом примере, сделает невозможным скруглить углы для IE9*/
border-radius:10px;
color: #333;
}
popuper.js в итоге будет выглядеть так:
$(function (){
if(!$.cookie('showPopuper'))
{
setTimeout(showPopuper, 3000);
}
$('#popuperOverlayer, #popuper .close').click(function(){
$('#popuper').fadeOut('fast', function(){
$('#popuperOverlayer').fadeOut('fast');
})
});
function showPopuper()
{
$('#popuperOverlayer').fadeIn('fast', function(){ // Показываем оверлаейер, как закончится анимация запускаем показ самого окна
$('#popuper').animate({'top':'50%'}, 1000, function(){
$('#popuperContent').effect('bounce', { times: 5, distance: 50 })
});
});
$.cookie('showPopuper', 1);
}
});